<template>
  <div class="seckill-order-view">
    <div class="order-header">
      <h1 class="order-title">我的秒杀订单</h1>
    </div>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="order-list">
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="price" label="价格">
          <template #default="scope">
            ¥{{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间">
          <template #default="scope">
            {{ formatDate(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间">
          <template #default="scope">
            {{ scope.row.payTime ? formatDate(scope.row.payTime) : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
              v-if="scope.row.status === 0"
              type="primary"
              size="small"
              @click="handlePay(scope.row.id)"
            >
              支付
            </el-button>
            <el-button
              v-if="scope.row.status === 0"
              type="danger"
              size="small"
              @click="handleCancel(scope.row.id)"
            >
              取消
            </el-button>
            <el-button
              v-if="scope.row.status === 1"
              type="success"
              size="small"
              @click="handleComplete(scope.row.id)"
            >
              确认收货
            </el-button>
            <el-button
              v-if="scope.row.status === 1 || scope.row.status === 3"
              type="warning"
              size="small"
              @click="handleRefund(scope.row.id)"
            >
              申请退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSeckillOrderList, paySeckillOrder, cancelSeckillOrder, completeSeckillOrder, refundSeckillOrder } from '@/axios/seckill'

const loading = ref(false)
const error = ref(null)
const orderList = ref([])

// 获取订单列表
const fetchOrderList = async () => {
  loading.value = true
  try {
    const data = await getSeckillOrderList()
    orderList.value = data
  } catch (err) {
    error.value = '获取订单列表失败'
    console.error('获取订单列表失败:', err)
  } finally {
    loading.value = false
  }
}

// 支付订单
const handlePay = async (orderId) => {
  try {
    await ElMessageBox.confirm('确认支付该订单吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await paySeckillOrder(orderId)
    if (res.code === 200) {
      ElMessage.success('支付成功')
      fetchOrderList()
    } else {
      ElMessage.error(res.msg || '支付失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error(err.message || '支付失败')
    }
  }
}

// 取消订单
const handleCancel = async (orderId) => {
  try {
    await ElMessageBox.confirm('确认取消该订单吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await cancelSeckillOrder(orderId)
    if (res.code === 200) {
      ElMessage.success('取消成功')
      fetchOrderList()
    } else {
      ElMessage.error(res.msg || '取消失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error(err.message || '取消失败')
    }
  }
}

// 确认收货
const handleComplete = async (orderId) => {
  try {
    await ElMessageBox.confirm('确认已收到商品吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await completeSeckillOrder(orderId)
    if (res.code === 200) {
      ElMessage.success('确认收货成功')
      fetchOrderList()
    } else {
      ElMessage.error(res.msg || '确认收货失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error(err.message || '确认收货失败')
    }
  }
}

// 申请退款
const handleRefund = async (orderId) => {
  try {
    await ElMessageBox.confirm('确认申请退款吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const res = await refundSeckillOrder(orderId)
    if (res.code === 200) {
      ElMessage.success('申请退款成功')
      fetchOrderList()
    } else {
      ElMessage.error(res.msg || '申请退款失败')
    }
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error(err.message || '申请退款失败')
    }
  }
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 未支付
    1: 'success', // 已支付
    2: 'danger',  // 已取消
    3: 'warning', // 已发货
    4: 'success', // 已完成
    5: 'danger',  // 已退货
    6: 'warning'  // 退款中
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '未支付',
    1: '已支付',
    2: '已取消',
    3: '已发货',
    4: '已完成',
    5: '已退货',
    6: '退款中'
  }
  return statusMap[status] || '未知状态'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleString()
}

onMounted(() => {
  fetchOrderList()
})
</script>

<style scoped>
.seckill-order-view {
  padding: 20px;
}

.order-header {
  margin-bottom: 20px;
}

.order-title {
  font-size: 24px;
  color: #2c3e50;
  margin: 0;
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.error {
  color: #e74c3c;
}

.order-list {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
</style> 